<template>
  <div :class="[`player-pure`, `player-pure-${theme}`]">
    <div class="player-pure-container">
      <b-button
        type="warning"
        @click="closePure"
        class="iconfont icon-min"
        width="40px"
      />

      <div :class="[`player-pure-top`, `player-pure-top-${theme}`]">
        <!-- 图片部分 -->
        <div class="player-record">
          <div class="player-record-support">
            <img src="../assets/player/play-bar-support.png" alt="" />
          </div>
          <div class="player-record-bar" :style="barStyle">
            <img src="../assets/player/play-bar.png" alt="" />
          </div>
          <div class="player-pure-pic">
            <img :src="song.pic" alt="" />
          </div>
        </div>
        <!--  歌词部分-->
        <div class="player-pure-lyric">
          <div class="player-pure-lyric-desc">
            <div class="song-title">{{ song.name }}</div>
            <div class="song-artist">{{ song.arist }}</div>
          </div>
          <!-- 歌词子组件 -->
          <layric
            :middle="true"
            :current-time="currentTime"
            :lyric="lyric"
          ></layric>
        </div>
      </div>
    </div>
    <!-- 评论 -->
    <div class="recommend_wrap">
      <recommend :remcommend-list="recommends"></recommend>
    </div>
    <!-- 分页 -->
    <div class="page_wrap">
      <el-pagination
        background
        :current-page.sync="offset"
        @current-change="pageChange"
        :page-size="30"
        :total="300"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import Layric from './player-lyric.vue'
import { theme } from '../mixin/global/theme'
import { _musicRecommend } from '../network/detail'
import recommend from '../components/recommend/recommend.vue'
export default {
  components: { Layric, recommend },
  mixins: [theme],
  props: {
    song: {
      //当前歌曲信息
      type: Object,
      default () {
        return {}
      }
    },
    lyric: {
      //歌词
      type: String,
      default: ''
    },
    currentTime: {
      //当前播放时间
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      limit: 30,
      offset: 1,
      recommends: null //评论数据
    }
  },
  watch: {
    song: {
      //监听歌曲信息变化
      immediate: true, //进入就监听,
      deep: true, //深度监听
      handler (newVal) {
        if (newVal.id) this.getRecommend()
        //获取歌词
      }
    }
  },
  methods: {
    // 分页功能
    pageChange (val) {
      this.offset = val
      this.getRecommend()
    },
    closePure () {
      this.$parent.isPure = false //关闭歌词详情
    },
    // 获取歌曲评论
    async getRecommend () {
      console.log(this.song.id)
      var res = await _musicRecommend(
        this.song.id,
        this.limit,
        (this.offset - 1) * this.limit
      )
      console.log(res)
      this.recommends = res.data.comments
    }
  },
  computed: {
    barStyle () {
      return {
        transform: this.getIsPlay ? `rotate(-7deg)` : `rotate(-45deg)`
      }
    },
    getIsPlay () {
      //获取父组件的数据  是否播放
      return this.$parent.isPlay
    }
  }
}
</script>
<style lang="less" scoped>
.player-pure {
  width: 100%;
  height: calc(100vh - 58px - 60px);
  overflow-y: auto;
  position: absolute;
  z-index: 999;
  left: 0px;
  bottom: 60px;
  &-light,
  &-green {
    background: #fff;
  }
  &-dark {
    background: var(--dark-bg-color);
  }
  &-container {
    padding: 0px 250px;
  }
}
.player-pure-top {
  height: 400px;
  display: flex;
  &-light,
  &-green {
    background: radial-gradient(closest-side, #7e635c, #fff);
  }
  &-dark {
    background: radial-gradient(closest-side, #3c3532, #16181c);
  }
}
.player-record {
  flex: 1;
  position: relative;
  &-support {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    z-index: 3;
    left: 0px;
    right: 0px;
    top: 0px;
    margin: auto;
    img {
      width: 100%;
    }
  }
  &-bar {
    width: 80px;
    transform-origin: 0 0;
    transform: rotate(-7deg);
    transition: transform 0.3s;
    position: absolute;
    z-index: 2;
    left: 49%;
    top: 17px;
    img {
      width: 100%;
    }
  }
}
.player-pure-lyric {
  width: 40%;
  &-desc {
    padding: 0px 20px;
    border: 40px;
    .song-title {
      font-size: 20px;
    }
    .song-artist {
      font-size: 13px;
      padding: 3px 0px;
    }
  }
}
// 最小化按钮
.icon-min {
  font-weight: 700;
  position: absolute;
  right: 200px;
  top: 10px;
}
.player-pure-pic {
  width: 240px;
  height: 240px;
  border: 40px solid #0e0e11;
  border-radius: 50%;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 60px;
  margin: auto;
  animation: rotate 20s linear infinite;
  &-light,
  &-green {
    box-shadow: 0 0 10px #918a85;
  }
  &-dark {
    box-shadow: 0 0 10px #f9f9f9;
  }
  img {
    width: 100%;
    border-radius: 50%;
  }
}
// 歌曲图片旋转动画
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(1turn);
  }
}
.recommend_wrap {
  width: 90%;
  margin: 10px auto;
}
.page_wrap {
  width: 90%;
  margin: 10px auto;
}
</style>
